<template>
  <div class="filter">
    <div class="addModal">
      <div class="filter-item">
        <label for="">姓名：</label>
        <Input
          v-model="vipName"
          placeholder="请输入姓名"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="filter-item">
        <label for="">性别：</label>
        <Select v-model="vipSex" style="width: 200px" clearable>
          <Option
            v-for="item in sexList"
            :value="item.value"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="filter-item">
        <label for="">电话：</label>
        <Input
          v-model="vipPhone"
          placeholder="请输入电话"
          :maxlength="11"
          show-word-limit
          clearable
          style="width: 200px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      vipSex: "",
      sexList: [
        {
          label: "男",
          value: "男",
        },
        {
          label: "女",
          value: "女",
        },
      ],
      vipName: "",
      vipPhone: "",
      vipId: 0,
    };
  },
  methods: {
    addVip() {
      this.$Modal.confirm({
        title: "添加提醒",
        content: "确定信息无误？",
        onOk: () => {
          axios
            .post("/api/gym/vip//insertVip", {
              vipName: this.vipName,
              vipSex: this.vipSex,
              vipPhone: this.vipPhone,
              status: "在线",
            })
            .then((res) => {
              if (res.data.status === 200) {
                this.$emit("on-close-add-modal");
              }
            });
        },
      });
    },

    clear() {
      this.vipName = "";
      this.vipPhone = "";
      this.vipSex = "";
    },

    updateVip() {
      axios
        .post("/api/gym/vip/updateVip", {
          vipName: this.vipName,
          vipSex: this.vipSex,
          vipPhone: this.vipPhone,
          vipId: this.vipId,
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.$emit("on-close-upd-modal");
          }
        });
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
}
.filter-item {
  margin-left: 20px;
  margin-top: 10px;
}
.addModal {
  justify-content: center;
  align-items: center;
}
.course-region {
  display: flex;
  flex-wrap: wrap;
  margin-top: 11px;
}
</style>
